<template>
  <div class="container">
    <el-row type="flex" justify="start" class="house-detail">
      <i class="el-icon-moon-night"></i>
      <span>地产详情</span>
    </el-row>
    <Carousel :house-img="hotPot"></Carousel>
    <el-row class="house-name"> 吉山总统级套房:{{ houseInfo.title }} </el-row>
    <el-row class="house-title">独踞吉山核心金融地脉，俯览吉山上下街之瑰丽璀璨，为您收纳吉山的极致精彩!</el-row>
    <el-row class="house-price"> 价格只需:{{ houseInfo.price }}元 </el-row>
    <div class="down-box" v-html="content"></div>
    <div class="map">
      <el-row type="flex" justify="start" class="house-address">{{ houseInfo.title }} 地址<i class="el-icon-map-location"></i>: </el-row>
      <GaodeMap v-if="location" :location="location"></GaodeMap>
    </div>
  </div>
</template>

<script>
import { getPropertiesById } from '@/api/house-detail'
import GaodeMap from './components/GaodeMap.vue'
import Carousel from './components/Carousel.vue'
export default {
  components: { GaodeMap, Carousel },
  data() {
    return {
      houseInfo: {}, //地产信息
      hotPot: [], //地产photos
      location: '',
      content: ''
    }
  },
  async created() {
    const res = await getPropertiesById(this.$route.params.id)
    // console.log(res.data);
    this.houseInfo = res.data
    console.log(res.data.photos, 53)
    const photos = res.data.photos.map((item) => item.url)
    this.hotPot = res.data.photos ? [res.data.image, ...photos] : [res.data.image]
    this.location = res.data.address
    this.content = res.data.content
    // console.log(this.content);
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 80%;
  overflow: hidden;
  margin: 0 auto;
  font-family: '微软雅黑';
  .el-row {
    color: rgb(89, 89, 89);
    &.house-detail {
      margin: 10px 0 20px 0;
      color: rgb(2, 26, 26);
      font-size: 20px;
    }
    &.house-name {
      font-weight: 700;
      font-size: 32px;
      margin: 80px 0 30px 0;
    }
    &.house-title {
      font-size: 18px;
    }
    &.house-price {
      font-size: 18px;
      margin: 10px 0 50px 0;
    }
    &.house-address {
      font-size: 18px;
      margin: 50px 0 10px 0;
    }
  }
  .map {
    width: 100%;
    height: 400px;
    margin: 50px auto;
    box-shadow: yellowgreen;
  }
  .down-box {
    text-align: start;
    text-indent: 2em;
  }
  i {
    padding-top: 3px;
  }
}
</style>
